<template>
  <div class="videoinfo">
    <div class="videoinfo_left">
      <!-- 标题 -->
      <div class="videoinfo_left_a">
        <h3>{{ VideoInfoList.title }}</h3>
        <span
          ><span>by&nbsp;</span
          ><router-link to="#">{{
            VideoInfoList.creator.nickname
          }}</router-link></span
        >
      </div>
      <!-- 播放器 -->
      <div class="videoinfo_left_b">
        <video :src="VideoUrl" controls autoplay></video>
        <!-- 点赞、收藏、转发 -->
        <ul class="Sanlian">
          <li>点赞({{ VideoInfoList.praisedCount }})</li>
          <li>收藏({{ VideoInfoList.subscribeCount }})</li>
          <li>转发({{ VideoInfoList.shareCount }})</li>
        </ul>
      </div>
      <!-- 评论 -->
      <div class="videoinfo_left_c">
        <Comment :VideoInfo="VideoInfo"></Comment>
      </div>
    </div>
    <div class="videoinfo_right">
      <!-- 视频简介 -->
      <div class="brief">
        <div class="brief_a">
          <h3>视频简介</h3>
        </div>
        <div class="brief_b">
          <div class="brief_b_info">
            <span
              >发布时间：{{ timestampToTime(VideoInfoList.publishTime) }}</span
            >
            <span>播放次数：{{ changenumber(VideoInfoList.playTime) }}次</span>
          </div>
          <div class="brief_b_content">
            {{ VideoInfoList.description }}
          </div>
        </div>
      </div>
      <!-- 相关视频 -->
      <div class="similar">
        <div class="similar_a">
          <h3>相似MV</h3>
        </div>
        <ul class="similar_b">
            <li v-for="(v, i) in SimilarList" :key="i">
            <div class="similar_b_img">
              <router-link :to="`/videoInfo/${v.vid}`"><img :src="v.coverUrl" /></router-link>
            </div>
            <div class="similar_b_info">
              <div class="qwe_a">
                <router-link :to="`/videoInfo/${v.vid}`">{{ v.title }}</router-link>
              </div>
              <div class="qwe_b">
                <span v-for="(q, w) in v.creator" :key="w">by&nbsp;<span v-if="w > 0">/</span><router-link to="#">{{ q.userName }}</router-link></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Comment from "../components/Comment.vue";
export default {
  components: { Comment },
  data() {
    return {
      VideoInfo: true,
      // 视频详情数据
      VideoInfoList: {
        creator: {
          nickname: "",
        },
      },
      //视频地址
      VideoUrl: {},
    //   相关视频数据
    SimilarList:{},
    };
  },
  methods: {
    // 获取视频详情数据
    getVideoInfoList() {
      axios
        .get(`http://127.0.0.1:3000/video/detail?id=${this.$route.params.id}`)
        .then((res) => {
          this.VideoInfoList = res.data.data;
        });
    },
    // 获取相关视频数据
    getSimilarList() {
      axios
        .get(`http://127.0.0.1:3000/related/allvideo?id=${this.$route.params.id}`)
        .then((res) => {
            this.SimilarList = res.data.data
        });
    },
    // 获取视频播放地址
    getVideoUrl() {
      axios
        .get(`http://127.0.0.1:3000/video/url?id=${this.$route.params.id}`)
        .then((res) => {
          this.VideoUrl = res.data.urls[0].url;
        });
    },
    // 转化播放次数
    changenumber(e) {
      if (e < 100000) {
        return e;
      } else {
        return Math.floor(e / 10000) + "万";
      }
    },
    // 转化时间戳
    timestampToTime(timestamp) {
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate();
      return Y + M + D;
    },
  },
  created() {
    this.getVideoInfoList();
    this.getVideoUrl();
    this.getSimilarList();
  },
};
</script>
<style scoped>
.videoinfo {
  display: flex;
  width: 980px;
  margin: 0 auto;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  background-color: #fff;
}
.videoinfo_left {
  width: 710px;
  border-right: 1px solid #d3d3d3;
  padding: 47px 30px 40px 39px;
}
.videoinfo_right {
  width: 270px;
  padding: 20px 40px 40px 30px;
}
/* 标题 */
.videoinfo_left > .videoinfo_left_a > h3 {
  font-size: 24px;
  font-weight: 400;
}
.videoinfo_left > .videoinfo_left_a > span {
  color: #333;
  font-size: 12px;
}
.videoinfo_left > .videoinfo_left_a > span > a {
  color: #0c73c2;
  font-size: 12px;
}
.videoinfo_left > .videoinfo_left_a > span > a:hover {
  text-decoration: underline;
}
/* 播放器 */
.videoinfo_left > .videoinfo_left_b{
    margin-top: 10px;
}
.videoinfo_left > .videoinfo_left_b > video {
  width: 640px;
  height: 360px;
}
.videoinfo_left > .videoinfo_left_b > .Sanlian {
  display: flex;
}
.videoinfo_left > .videoinfo_left_b > .Sanlian > li {
  background-color: #f2f2f2;
  padding: 3px 5px;
  border: 1px solid #c3c3c3;
  margin-right: 5px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 12px;
  margin-top: 10px;
}
.videoinfo_left > .videoinfo_left_b > .Sanlian > li:hover {
  background-color: #fcfcfc;
}
.videoinfo_left > .videoinfo_left_c {
  margin-top: 40px;
}
/* 右侧视频简介 */
.brief > .brief_a {
  padding-bottom: 8px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 20px;
}
.brief > .brief_a > h3 {
  font-size: 12px;
}
.brief > .brief_b {
  font-size: 12px;
}
.brief > .brief_b > .brief_b_info {
  display: flex;
  flex-wrap: wrap;
  color: #999999;
  margin-bottom: 10px;
}
/* 相关视频 */
.similar > .similar_a {
  padding-bottom: 8px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 20px;
  margin-top: 40px;
}
.similar > .similar_a > h3 {
  font-size: 12px;
}
.similar_b > li {
  margin-bottom: 15px;
  display: flex;
}
.similar_b > li > .similar_b_img > a > img {
  width: 96px;
  height: 54px;
}
.similar_b > li > .similar_b_info {
  width: 99px;
  margin-left: 5px;
}
.similar_b > li > .similar_b_info > .qwe_a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.similar_b > li > .similar_b_info > .qwe_a > a {
  font-size: 12px;
}
.similar_b > li > .similar_b_info > .qwe_a > a:hover {
  text-decoration: underline;
}
.similar_b > li > .similar_b_info > .qwe_b {
  font-size: 12px;
  color: #b5b5b5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}
.similar_b > li > .similar_b_info > .qwe_b>span>a{
  font-size: 12px;
  color: #b5b5b5;
}
.similar_b > li > .similar_b_info > .qwe_b>span>a:hover{
 text-decoration: underline;
}
</style>